{% block content %}
<div id="app" class="character-list-container">
    <el-card>
        <template #header>
            <div class="card-header">
                <h2>我的角色</h2>
                <el-button type="primary" @click="createCharacter">创建角色</el-button>
            </div>
        </template>

        <!-- 搜索栏 -->
        <div class="search-bar">
            <el-input
                v-model="searchQuery"
                placeholder="搜索角色..."
                clearable
                @input="handleSearch">
                <template #prefix>
                    <search-icon />
                </template>
            </el-input>
        </div>

        <!-- 角色列表 -->
        <el-row :gutter="20" class="character-grid">
            <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="character in filteredCharacters" :key="character.id">
                <el-card shadow="hover" class="character-card">
                    <template #header>
                        <div class="character-header">
                            <h3>${ character.name }</h3>
                            <el-tag>等级 1</el-tag>
                        </div>
                    </template>
                    
                    <!-- 基础属性 -->
                    <div class="attributes">
                        <el-descriptions :column="2" border>
                            <el-descriptions-item label="生命值">
                                <el-progress 
                                    :percentage="(character.current_hp / character.max_hp) * 100"
                                    :format="() => `${character.current_hp}/${character.max_hp}`"
                                    :color="customColors">
                                </el-progress>
                            </el-descriptions-item>
                            <el-descriptions-item label="法力值">
                                <el-progress 
                                    :percentage="(character.current_mp / character.max_mp) * 100"
                                    :format="() => `${character.current_mp}/${character.max_mp}`"
                                    type="info">
                                </el-progress>
                            </el-descriptions-item>
                        </el-descriptions>
                    </div>

                    <!-- 五维属性 -->
                    <div class="stats">
                        <el-row :gutter="10">
                            <el-col :span="8">
                                <div class="stat-item">
                                    <span class="label">体质</span>
                                    <span class="value">${ character.constitution }</span>
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div class="stat-item">
                                    <span class="label">力量</span>
                                    <span class="value">${ character.strength }</span>
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div class="stat-item">
                                    <span class="label">精神</span>
                                    <span class="value">${ character.spirit }</span>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="10">
                            <el-col :span="12">
                                <div class="stat-item">
                                    <span class="label">智力</span>
                                    <span class="value">${ character.intelligence }</span>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div class="stat-item">
                                    <span class="label">幸运</span>
                                    <span class="value">${ character.luck }</span>
                                </div>
                            </el-col>
                        </el-row>
                    </div>

                    <!-- 操作按钮 -->
                    <div class="actions">
                        <el-button-group>
                            <el-button type="primary" @click="editCharacter(character.id)">
                                编辑
                            </el-button>
                            <el-button type="danger" @click="deleteCharacter(character.id)">
                                删除
                            </el-button>
                        </el-button-group>
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <!-- 空状态 -->
        <el-empty v-if="characters.length === 0" description="暂无角色">
            <el-button type="primary" @click="createCharacter">创建角色</el-button>
        </el-empty>

        <!-- 分页 -->
        <div v-if="totalPages > 1" class="pagination-container">
            <el-pagination
                layout="prev, pager, next"
                :total="totalItems"
                :page-size="pageSize"
                :current-page="currentPage"
                @current-change="handlePageChange">
            </el-pagination>
        </div>
    </el-card>
</div>
{% endblock %}

{% block extra_js %}
<script>
const { createApp, ref } = Vue;
const { Search } = ElementPlusIconsVue;

const app = createApp({
    delimiters: ['${', '}'],  // 更改分隔符，避免与Django模板冲突
    data() {
        return {
            characters: [],
            searchQuery: '',
            currentPage: 1,
            pageSize: 10,
            totalItems: 0,
            totalPages: 0,
            customColors: [
                {color: '#f56c6c', percentage: 20},
                {color: '#e6a23c', percentage: 40},
                {color: '#5cb87a', percentage: 100}
            ]
        }
    },
    computed: {
        filteredCharacters() {
            return this.characters.filter(character => 
                character.name.includes(this.searchQuery)
            );
        }
    },
    methods: {
        fetchCharacters() {
            fetch(`/api/characters/?page=${this.currentPage}`)
                .then(response => response.json())
                .then(data => {
                    this.characters = data.results;
                    this.totalItems = data.count;
                    this.totalPages = Math.ceil(data.count / this.pageSize);
                })
                .catch(error => console.error('Error fetching characters:', error));
        },
        createCharacter() {
            window.location.href = "/characters/create/";
        },
        editCharacter(id) {
            window.location.href = `/characters/${id}/edit/`;
        },
        deleteCharacter(id) {
            ElMessageBox.confirm(
                '确定要删除这个角色吗？',
                '警告',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            ).then(() => {
                fetch(`/api/characters/${id}/`, {
                    method: 'DELETE',
                    headers: {
                        'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
                    }
                })
                .then(response => {
                    if (response.ok) {
                        ElMessage.success('删除成功');
                        this.fetchCharacters();
                    } else {
                        ElMessage.error('删除失败');
                    }
                })
                .catch(error => console.error('Error deleting character:', error));
            }).catch(() => {})
        },
        handleSearch() {
            this.currentPage = 1;
            this.fetchCharacters();
        },
        handlePageChange(page) {
            this.currentPage = page;
            this.fetchCharacters();
        }
    },
    mounted() {
        this.fetchCharacters();
    }
});

app.component('search-icon', Search);
app.use(ElementPlus);
app.mount('#app');
</script>
{% endblock %} 